### Switch ###

div#mainArea.stPhone {
	## Phone
}

div#mainArea.stDesktop {
	## Desktop
}

div.x-tablet div.x-ipad div.x-ios {
	## iPad
}

div.x-tablet div.x-iphone div.x-ios {
	## iPhone
}

### General ###

	div#loading-mask {
	    position: absolute;
	    left: 0;
	    top: 0;
	    width: 100%;
	    height: 100%;
	    background-color: red;
	    text-align: center;
	}
		
	div#mainArea div.x-indexbar {
		opacity: 0.7;
	}
	
	div#mainArea div.x-list-item {
		padding: 0px !important;
	}
	
	div#mainArea h3.x-list-header {
		color: #ddDDdd !important;
	}
	
	div.x-toolbar {
		-webkit-box-shadow: 0px 1px 5px #000;
	}

	div.x-list-group {
		-webkit-box-shadow: 0px 2px 6px #000, 0px -1px 4px #000;
	}
	
	div#mainArea div.x-list {
		background-image: url('../gfx/app/bg-dotted.png');
		background-repeat: repeat;
	}
	
### Presets ###

	div#viewPresetList,
	div#viewPresetListEdit {

	}
	
	div.x-list-item div.counterListObj,
	div.x-list-item div.presetListObj {
		color: black;
			text-shadow: rgba(0, 0, 0, 0.333) 0px 1px 0px;
		border-top: #eee 1px solid;
			background: url('../gfx/app/bg-gradient-gray.png') repeat bottom;
			-webkit-background-size: auto 100%;
		border-bottom: #aaa 1px solid;
		padding: 0.5em 0.8em;
	}
	
	div.x-item-selected div.counterListObj,
	div.x-item-selected div.presetListObj {
		color: white;
			text-shadow: rgba(0, 0, 0, 0.496094) 0px -1px 0px;
		border-top: #084B9B 1px solid;
			background: url('../gfx/app/bg-gradient-blue.png') repeat bottom;
			-webkit-background-size: auto 100%;
		border-bottom: #003679 1px solid;
	}
	
	div.counterListObj div.counterGfx,
	div.presetListObj div.presetGfx {
		width: 107px;
		height: 72px;
		background-repeat: no-repeat;
		border-top: 1px solid #000; 
			border-left: 1px solid #666; 
			border-right: 1px solid #666;
		border-bottom: 1px solid #ddd; 
		background-color: #ddd;
		float: left;
		margin: 2px 10px 2px 0px;
	}
	
	div.x-item-selected div.counterListObj div.counterGfx,
	div.x-item-selected div.presetListObj div.presetGfx {
		border-top: 1px solid #021022;
			border-left: 1px solid #335072;
			border-right: 1px solid #335072;
		border-bottom: 1px solid #084B9B;
	}
	
	div.counterSetsBlock {
		float: left;
	}
	
	div.presetListObj span.presetName {
		position: relative;
		font-weight: bold;
		font-size: 25px;
		top: -5px;
	}
	
	div.presetListObj span.presetTime {
		font-size: 14px;
		color: #aaa;
	}
	
	div.presetListObj ul.counterSets {
	}
	
	div.presetListObj ul.counterSets li.counterSetData {
		font-size: 10px;
		float: left;
		margin-top: 3px;
		margin-right: 3px;
		color: #eee;
			text-shadow: rgba(0, 0, 0, 0.333) 0px -1px 0px;
		border: 1px solid #aaa;
		padding: 1px 4px;
		background: #bebebe;
	}
	
	div.x-item-selected div.presetListObj ul.counterSets li.counterSetData {
		color: #3c689a;
		background: #042d5e;
		border: 1px solid #043c7f;
	}
	
	div.counterListObj div.clearBoth,
	div.presetListObj div.clearBoth {
		clear: both;
	}
	
### Counter ###
	
	div#viewCounterList,
	div#viewCounterListEdit {
		
	}
	
	div.counterListObj div.counterGfx {
		width: 72px;
		position: relative;
		z-index: 1;
	}

	div.counterListObj div.counterName {
		font-weight: bold;
		font-size: 22px;
		float: left;
		margin-top: 23px;
		position: relative;
		z-index: 1;
	}
	
	div.counterListObj div.counterNr {
		float: right;
		margin-top: 3px;
		font-size: 50px;
		font-weight: bold;
		position: relative;
		z-index: 1;
	}
	
	div.counterListObj div.counterNr span.itemActive {
		font-size: 50px;
		color: #003a7f;
	}
	
	div.counterListObj div.counterNr span.itemThere {
		font-size: 50px;
		color: #FFF;
	}

	div.x-item-selected div.counterListObj div.counterNr span.itemActive {
		font-size: 50px;
		color: #d8eaff;
	}
	
	div.x-item-selected div.counterListObj div.counterNr span.itemThere {
		font-size: 50px;
		color: #FFF;
	}
	
	div.counterListObj div.counterNr div.countdownSpinner {
		width: 32px;
		height: 32px;
		margin: 16px 14px 0 0;
		background-image: url('../gfx/app/spinner-gray.gif');
		background-repeat: no-repeat;
		float: left;
		position: relative;
		z-index: 1;
	}

	div.x-item-selected div.counterListObj div.counterNr div.countdownSpinner {
		background-image: url('../gfx/app/spinner-blue.gif');
	}

	div.counterBar {
		position: absolute;
		top: 0;
		left: 0;
		background: url('../gfx/app/bg-gradient-red.png') repeat bottom;
		opacity: 0.75;
		height: 100%;
		z-index: 0;
		border-right: 1px solid #FFF;
		visibility: hidden;
	}
